import React from 'react';
import cn from 'classnames';
import { Steps } from 'antd';
import pic from '@/pages/RecruitEmail/images/interview-bg-new.png';
import { RecruitContext } from '@/pages/RecruitEmail/Context';
import { Icon } from '@/pages/Recruitment/components';
import TaoTai from '@/assets/svg/taotai.svg';
import styles from './index.less';

const { Step } = Steps;
const InterviewTitlePc = ({
    title = '欢迎应聘',
    titleAfter,
    content = '请确认您的面试安排',
    src = pic,
    iconType,
    iconStyle = {},
    picStyle,
    wrap = false,
    sort = false,
    showStep = true,
    ...rest
}) => {
    let context = React.useContext(RecruitContext);
    if (!context) {
        context = { data: null };
    }
    const { data, steps, current, handleChange } = context;
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const customDot = (dot, { status, index }) => <div>{dot}</div>;

    return (
        <div className={styles.interviewTitle} {...rest}>
            <div style={{ display: 'flex', alignItems: 'flex-start' }}>
                {iconType && iconType !== 'taotai' ? (
                    <Icon
                        type={iconType}
                        theme="filled"
                        style={{
                            paddingTop: '2px',
                            ...iconStyle,
                            fontSize: '40px',
                            lineHeight: '36px',
                            marginRight: '10px'
                        }}
                    />
                ) : (
                    iconType && <img src={TaoTai} alt="" style={{ marginRight: '18px' }} />
                )}
                <div style={{ display: 'flex', flexDirection: 'column' }}>
                    <div
                        // eslint-disable-next-line no-nested-ternary
                        style={{ display: 'flex', flexDirection: wrap ? (!sort ? 'column-reverse' : 'column') : 'row' }}
                    >
                        {title && (
                            <div className={styles.title} style={{ marginBottom: wrap && sort ? '16px' : 0 }}>
                                {title}
                            </div>
                        )}
                        {content && (
                            <div
                                className={cn(styles.title, styles.content)}
                                style={{ marginBottom: wrap && !sort ? '16px' : 0 }}
                            >
                                {content}
                            </div>
                        )}
                    </div>
                    {showStep && (
                        <Steps
                            current={current}
                            onChange={handleChange}
                            progressDot={customDot}
                            className={styles.customStep}
                        >
                            {steps.map((item, index) => (
                                <Step
                                    key={item.title}
                                    title=""
                                    description={item.title}
                                    status={item?.status}
                                    disabled={index >= data?.linkStep}
                                />
                            ))}
                        </Steps>
                    )}

                    {/* </div> */}
                </div>
            </div>

            {src && (
                <div style={{ maxWidth: 375, ...picStyle }}>
                    <img alt="" src={src} style={{ width: '100%' }} />
                </div>
            )}
        </div>
    );
};
export default InterviewTitlePc;
